<template>
  <div class="resiters">
    <div class="resiter-c" style="min-height:300px">
      <div class="resiter-h">
        注册信息表
      </div>
      <div class="resiter-b">
    <el-form :model="registerInfoDtoForm" :rules="rules" ref="registerInfoDtoForm" label-width="136px" class="demo-ruleForm">
      <el-form-item label="账号/邮箱" prop="vendorName">
        <el-input v-model="registerInfoDtoForm.vendorName" placeholder="账号/邮箱"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="verificationCode">
        <el-input v-model="registerInfoDtoForm.verificationCode"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-message" @click="submitForm('registerInfoDtoForm')">发送邮件</el-button>
        <el-button type="info" icon="el-icon-refresh" @click="resetForm('registerInfoDtoForm')">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
    </div>
  </div>
</template>
<script>
 import axios  from 'axios'
  export default {
    data() {
      return {
        registerInfoDtoForm: {
          vendorName : '',
          verificationCode: ''
        },
        rules: {
          vendorName: [{
              required: true,
              message: '请输入账号/邮箱',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 200,
              message: '长度在 1 到 200 个字符',
              trigger: 'blur'
            }
          ],
      verificationCode: [{
          required: true,
          message: '请输入验证码',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 200,
          message: '长度在 1 到 200 个字符',
          trigger: 'blur'
        }
      ]
     }    
      };
    },
    methods: {
      addgroupList(formName) {
    this.$refs[formName].validate((valid) => {
      // if (valid) {
      //   axios({
      //     method: 'post',
      //     url: 'http://localhost:8764/newAccount/register',
      //     data: {
      //       vendorName:this.vendorName,
      //       companyType:this.companyType
      //     }       
      //   }).then(res => {
      //     this.creatGroup = false;
      //     this.searchGroupName = '';
      //     this.initData();
      //   }).catch(error => {
      //     console.log('网络错误，不能访问');
      //   });
      // } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      });
   },
      // submitForm(formName) {
      //   var formData = JSON.stringify(this.registerInfoDtoForm); 
      //   console.log(formData);
      //   this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //    axios.post("http://localhost:8764/newAccount/register", formData)
      //   .then(res => {
      //     console.log(this.registerInfoDtoForm.vendorName);
      //     this.creatGroup = false;
      //     this.searchGroupName = '';
      //     this.initData();
      //   }).catch(error => {
      //     console.log(this.registerInfoDtoForm.vendorName);
      //     console.log('网络错误，不能访问');
      //   });
      // } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      //   });
      // },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post('http://localhost:8764/newAccount/register', this.registerInfoDtoForm)
            .then(function (response) {
              console.log(response);
              var data = response.data;
              console.log();
                    })
              .catch(function (error) {
                        console.log(error);
                        alert(error);
                    });
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }

</script>
